import React,{Component} from 'react';
import Util from '../common/util'
import * as URLconstant from '../constant/URLconstant'
import Header from '../common/header'
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableOpacity,
    SafeAreaView,
    FlatList,
    Alert
} from 'react-native'
export default class selectFrame extends Component{
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            page:1,
            limit:30,
            frameList:[],
            loaded:false,
            again:true,
            isOver:false,
            searchName:'price',
            searchValue:'asc'
        };
    }

    componentDidMount() {
        this.getFrame()
    }

    getFrame(){
        let url = URLconstant.GET_FRAME
        let datakey=[]
        datakey['page']=this.state.page
        datakey['limit']=this.state.limit
        datakey['searchName']=this.state.searchName
        datakey['searchValue']=this.state.searchValue
        Util.get(url,datakey,(datas)=>{
            if(datas.status==0){
                let again = true
                let isOver = false
                let newList = datas.data.goods
                let limit = this.state.limit
                if(!newList||newList.length<limit){
                    again=false
                    isOver = true
                }
                let frameList=this.state.frameList;
                Array.prototype.push.apply(frameList, newList);
                this.setState({
                    isOver:isOver,
                    frameList:frameList,
                    again:again,
                    loaded:true,
                })
            }
        },(err)=>{

        })
    }



    async selectSort(sort){
        let searchValue = this.state.searchValue
        let searchName = this.state.searchName
        if(searchName==sort){
            searchValue=searchValue=='asc'?"desc":"asc"
        }else{
            searchValue='asc'
        }
        await this.setState({
            searchValue:searchValue,
            searchName:sort,
            loaded:false,
            page:1,
            frameList:[]
        })
        this.getFrame()
    }


    showSortOrder(sort){
        let searchValue = this.state.searchValue
        let searchName = this.state.searchName
        let style={width:10,height:5,marginLeft:3}
        let url
        if(searchName==sort){
            url = require('../imgs/sort.png')
            if(searchValue=='desc'){
                style = {width:10,height:5,marginLeft:3,transform: [{rotateX:'180deg'}]}
            }
        }else{
            url = require('../imgs/sort2.png')
        }
        return(
            <Image
                source={url}
                resizeMode={'cover'}
                style={style}
            />
        )
    }

    showSort(){
        return(
            <View style={{backgroundColor:"#f2f2f2",height:40,paddingHorizontal:20,flexDirection:'row'}}>
                <TouchableOpacity onPress={()=>this.selectSort('price')} style={styles.sort_item}>
                    <Text style={this.state.searchName=='price'?{fontSize:14,color:"#f00"}:{fontSize:14,color:"#333"}}>价格</Text>
                    {this.showSortOrder('price')}
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>this.selectSort('add_time')}  style={styles.sort_item}>
                    <Text style={this.state.searchName=='add_time'?{fontSize:14,color:"#f00"}:{fontSize:14,color:"#333"}}>上新</Text>
                    {this.showSortOrder('add_time')}
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>this.selectSort('length')}  style={styles.sort_item}>
                    <Text style={this.state.searchName=='length'?{fontSize:14,color:"#f00"}:{fontSize:14,color:"#333"}}>尺寸</Text>
                    {this.showSortOrder('length')}
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>this.selectSort('virtual_seles')}  style={styles.sort_item}>
                    <Text style={this.state.searchName=='virtual_seles'?{fontSize:14,color:"#f00"}:{fontSize:14,color:"#333"}}>销量</Text>
                    {this.showSortOrder('virtual_seles')}
                </TouchableOpacity>
            </View>
        )
    }

    async onEndReached(){
        if(this.state.again){
            await this.setState({
                page:this.state.page+1
            })
            this.getFrame()
        }
    }

    renderFooter(){
        return (
            <View style={{alignItems:'center',justifyContent:'center',paddingVertical:20,width:Util.size.width}}>
                <Text style={{fontSize:12,color:"#969696"}}>{this.state.isOver?"没有更多数据了":"正在加载中"}</Text>
            </View>
        )
    }


    selectFrame(item){
        let {side,setFrame} = this.props.route.params
        if(side){
            setFrame(item,side)
            this.props.navigation.pop()
        }else{
            let {image_url,picLength} = this.props.route.params
            this.props.navigation.replace("MatchFrame",{
                image_url:image_url,
                picLength:parseFloat(picLength),
                outerFrame:JSON.stringify(item)
            })
        }
    }

    _renderRow=({ item })=>{
        return(
            <TouchableOpacity onPress={()=>this.selectFrame(item)} style={[{alignItems:'center'}]} >
                <View style={styles.frame_item}>
                    <Image
                        source={item.image_url?{uri:item.image_url}:require('../imgs/frame_06.png')}
                        resizeMode={'cover'}
                        style={{width:(Util.size.width-30)/3,height:(Util.size.width-30)/3}}
                    />
                </View>
                <Text style={{fontSize:12,color:"#333",marginTop:3}}>{item.title}</Text>
            </TouchableOpacity>
        )
    }

    render(){
        return(
            <SafeAreaView style={{flex:1,backgroundColor:"#fff"}}>
                <Header navigation={this.props.navigation} title={'选择画框'}/>
                {this.showSort()}
                <View style={{flex:1}}>
                    {
                        this.state.loaded == false ?
                            <View style={{flex: 1}}>
                                {Util.loading()}
                            </View> :
                            <FlatList
                                style={{paddingTop:10}}
                                numColumns={3}
                                columnWrapperStyle={styles.goods_list_item}
                                data={this.state.frameList}
                                renderItem={this._renderRow}
                                onEndReached={this.onEndReached.bind(this)}
                                keyExtractor={item => item.goods_id}
                            />
                    }
                </View>
            </SafeAreaView>
        )
    }
}

var styles = StyleSheet.create({
    sort_item:{
        flex:1,
        height:40,
        alignItems:'center',
        justifyContent:'center',
        flexDirection:'row'
    },
    goods_list:{
        flexDirection:'row',
        alignItems:"center",
        flexWrap:'wrap',
        marginBottom:10,
        paddingHorizontal:10,
        paddingVertical:10
    },
    frame_item:{
        width:(Util.size.width-30)/3,
        height:(Util.size.width-30)/3,
        borderWidth:1,
        borderColor:"#e0e0e0",
        alignItems:'center',
        justifyContent:'center',
    },
    goods_list_item:{
        justifyContent:'space-between',
        paddingHorizontal:10
    },
})